<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>生命周期</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
         
       </div>

    </body>
    <script>
        //第一步：定义子组件
        let buttonCounter = {
            data(){
                return{
                    count:1
                }
            },
            template:`【子组件】<button @click="count++">Count is: {{count}}</button>`,
            beforeUnmount(){
                console.log('【子组件】【7、beforeUnmount】在一个组件实例被卸载之前调用。');
            },
            unmounted(){
                console.log('【子组件】【8、unmounted】在一个组件实例被卸载之后调用。');
            }
        }
       
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                count:0,//等价于const count = ref(0);
                seen :true, //声明seen响应式状态
              }
           },
           //第2步：注册组件
           components:{
             buttonCounter: buttonCounter,//buttonCounter: buttonCounter : 前者是注册后的子组件名，后者是子组件实例的变量名
           },
           template: `<button @click="count++">Count is: {{count}}</button><buttonCounter v-if='seen'/>`,
        beforeCreate(){
            console.log('【1、beforeCreate】会在实例初始化完成、props 解析之后、`data()` 和 `computed` 等选项处理之前立即调用。', this.count)
        },
        created(){
            console.log('【2、created】在组件实例处理完所有与状态相关的选项后调用', this.count);
        },
        beforeMount(){
            console.log('【3、beforeMount】在组件被挂载之前调用', this.count, document.getElementById('app').innerHTML);
        },
        mounted(){
            console.log('【4、mounted】在组件被挂载之后调用。', this.count, document.getElementById('app').innerHTML);
        },
        beforeUpdate(){
            console.log('【5、beforeUpdate】在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。', this.count, document.getElementById('app').innerHTML);
        },
        updated(){
            console.log('【6、updated】在组件因为一个响应式状态变更而更新其 DOM 树之后调用。', this.count, document.getElementById('app').innerHTML);
        },
        beforeUnmount(){
            console.log('【7、beforeUnmount】在一个组件实例被卸载之前调用。');
        },
        unmounted(){
            console.log('【8、unmounted】在一个组件实例被卸载之后调用');
        },
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>